<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #F7F7F7;
        }

        #conten {
            width: 1035px;
            margin: 50px auto;
            background-color: #FFFFFF;
        }

        .left {
            width: 800px;
            height: 650px;
            border: 1px solid #333;
            display: inline-block;

        }

        .left img {
            width: 760px;
            height: 610px;
            margin: 20px;

        }

        .right {
            width: 230px;
            height: 650px;
            float: right;
            border: 1px solid #333;
            overflow: hidden;
        }


        li {
            width: 200px;
            height: 90px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            padding: 15px;
            margin: 0 0 10px 0;
        }

        li>img {
            width: 168px;
            height: 90px;
        }
    </style>
</head>

<body>
    <div id='conten'>
        <div class="left">
            <img src="../img/b1.jpg" alt="">
        </div>
        <div class="right">
            <ul>

            </ul>
        </div>
    </div>
    <script>
        var arr = ['../img/b1.jpg'];
        var str = '../img/b';
        var str1 = '';
        for (let index = 1; index < 8; index++) {
            var url = str + index + '.jpg';
            str1 += `<li> 
                 <img src="${url}" alt="">
                </li>`;
        }
        console.log(str1);

        var ul = document.querySelector('ul');
        ul.innerHTML = str1;

        var lis = document.querySelector('li');

        var imgs = document.querySelectorAll('.right > ul li img');
        // console.log(imgs);

        var left = document.querySelector('.left');

        var img = document.querySelector('.left>img')

        var str2 = ''
        for (let i = 0; i < 7; i++) {
            console.log(imgs[i]);
            imgs[i].onclick = function () {
                left.removeChild(img);
                var url2 = str + (i + 1) + '.jpg';
                console.log(url2);
                str2 += `<img src="${url2}" alt="">`;
                left.innerHTML = str2;
            }

        }



    </script>
</body>

</html>